<template>
    <div calss="app-container">
        <!--查询条件-->
        <el-card>
            <el-form ref="queryRef" :inline="true" :model="queryParams" label-width="80px">
                <el-form-item label="订单编号" prop="ordersCode">
                    <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
                    <el-button icon="Refresh" @click="resetQuery"> 重置 </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 20px;">
            <el-table v-loading="loading" :data="pageData.rows" style="width: 100%">
                <el-table-column label="id" align="center" prop="orderId" />
                <el-table-column label="商品id" align="center" prop="productId" />
                <el-table-column label="订单编号" align="center" prop="orderCode" width="200px"/>
                <el-table-column label="用户id" align="center" prop="userId" />
                <el-table-column label="总数量" align="center" prop="totalQuantity" />
                <el-table-column label="总金额" align="center" prop="totalAmount" />
                <el-table-column label="订单状态((0未支付，1待发货，2已发货，3已完成  4 退货))" align="center" prop="orderStatus"
                    width="220px" />
                <el-table-column label="支付金额" align="center" prop="payAmount" />
                <el-table-column label="支付时间" align="center" prop="payTime" width="100px">
                    <template #default="scope">
                        <span>{{parseTime(scope.row.payTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" align="center" prop="payType" />
                <el-table-column label="支付截止时间" align="center" prop="payDeadline" width="100px">
                    <template #default="scope">
                        <span>{{parseTime(scope.row.payDeadline)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分兑换" align="center" prop="creditsExchange" />
                <el-table-column label="运费" align="center" prop="shippingFee" />
                <el-table-column label="收货人" align="center" prop="consigneeName" />
                <el-table-column label="收货人电话" align="center" prop="consigneePhone" width="200px"/>
                <el-table-column label="收货地址" align="center" prop="consigneeAddress" width="200px"/>
                <el-table-column label="邮寄单号" align="center" prop="courierNumber" width="200px"/>
                <el-table-column label="快递名称" align="center" prop="courierCompany" />
                <el-table-column label="备注" align="center" prop="orderRemark" />
                <el-table-column label="会员折扣" align="center" prop="vipDiscount" />
                <el-table-column label="折扣金额" align="center" prop="discountAmount" />
                <el-table-column label="兑换卷id" align="center" prop="couponId" />
                <el-table-column label="规格id" align="center" prop="specificationId" />
            </el-table>
        </el-card>
    </div>
</template>

<script setup name="Orders" lang="ts">
    import { ComponentInternalInstance, getCurrentInstance, reactive, ref ,toRefs } from 'vue';
    import { OrdersQueryReq, OrdersQueryResp } from '@/types/app/my/orders/orders'
    import { listOrders } from '@/api/app/my/myorders/orders';
    // 获取当前vue3的页面this对象转换为proxy代理
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    // 响应式对象
    const loading = ref<boolean>(false);

    // 分页数据
    const pageData = reactive<{
        total : number;
        rows : OrdersQueryResp[]
    }>({
        total: 0,
        rows: []
    })

    // 响应式代理模型
    const data = reactive<{
        queryParams : OrdersQueryReq
    }>({
        queryParams: {
            orderCode: '',
            pageNum: 1,
            pageSize: 10
        }
    })

    // 代理模型转为相应模型
    const { queryParams } = toRefs(data)


    // 分页查询
    function getList() {
        loading.value = true;
        listOrders(queryParams.value).then((resp : any) => {
            pageData.total = resp.data.total;
            pageData.rows = resp.data.list;
            loading.value = false;
        });
    }
    // 重置
    function resetQuery() {
        queryParams.value.orderCode = '';
        proxy?.resetForm('queryRef');
        //查询
        handleQuery();
    }

    // 查询
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }

    // 初始化查询
    getList();
</script>
